<template>
  <div class="new-anime">
    <h3>{{ title }}</h3>
    <div class="new-anime-time_table">
      <ul>
        <li
          v-for="(day, index) in weekArray"
          @click="week = index"
          :key="index"
          :class="{ weekday: week === index }"
        >
          <p>{{ day }}</p>
        </li>
      </ul>
      <div class="new-anime-box_list">
        <div
          @click="toAnimeMain(item.id)"
          class="new-anime-box"
          v-for="item in perweek"
          :key="item.id"
        >
          <h4>{{ item.animeTitle }}</h4>
          <p>连载至第{{ item.anthologys }}集</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

import { toAnimeMain } from '@/router/jump'

function getweekday() {
  const weekArray = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六')

  return {
    weekArray
  }
}

export default {
  name: 'AnimeTime',
  props: {
    title: {
      default: ''
    },
    data: {
      default: {}
    }
  },
  setup(props) {
    const week = ref(new Date().getDay())
    const perweek = computed(() => {
      const keys = Object.keys(props.data)
      const key = keys.filter((value) => value == week.value)
      return props.data[key]
    })

    return {
      ...getweekday(),
      week,
      perweek,
      toAnimeMain
    }
  }
}
</script>

<style lang="scss" scoped>
.new-anime {
  width: 100%;
  padding: 20px;
  background-color: $bg;
  border-radius: 18px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 180px;
  h3 {
    user-select: none;
    color: $font;
    padding-bottom: 12px;
  }
  &-time_table {
    ul {
      display: flex;
      gap: 6px;
      margin-bottom: 20px;
      li {
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.25s;
        &:hover {
          transition: all 0.25s;
          background-color: $primary;
          p {
            color: #fff;
          }
        }
        p {
          user-select: none;
          line-height: 32px;
          padding: 0 14px;
          color: $font_unactive;
          box-sizing: border-box;
        }
      }
      .weekday {
        background-color: $primary;
        p {
          color: #fff;
        }
      }
    }
    .new-anime-box_list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      .new-anime-box {
        padding: 6px 10px;
        max-width: 150px;
        background-color: $box_bg;
        box-sizing: border-box;
        border-radius: 4px;
        h4 {
          @extend .title_norwarp;
          font-size: 12px;
          color: $primary;
        }
        p {
          @extend .title_norwarp;
          color: $font_unactive;
          font-size: 12px;
        }
      }
    }
  }
}

.title_norwarp {
  cursor: pointer;
  user-select: none;
  width: 100%;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
